<template>
    <view class="u-line-progress" :style="$u.addStyle(customStyle)">
        <view
            class="u-line-progress__background"
            ref="u_line_progress_background"
            :style="{
                backgroundColor: inactiveColor,
                height: $u.addUnit(height)
            }"
        >
        </view>
        <view class="u-line-progress__line" :style="progressStyle">
            <slot>
                <text v-if="showText && percentage >= 10" class="u-line-progress__text">{{ innserPercentage + '%' }}</text>
            </slot>
        </view>
    </view>
</template>

<script lang="ts" setup>
import { onLoad } from '@dcloudio/uni-app'
import { computed, onMounted, ref } from 'vue'

// #ifdef APP-NVUE
const dom: any = uni.requireNativePlugin('dom')
// #endif
interface T {
    activeColor?: string
    inactiveColor?: string
    percentage?: number | string
    showText?: boolean
    height?: number | string
    customStyle?: any
}
const Props = withDefaults(defineProps<T>(), {
    activeColor: '#19be6b',
    inactiveColor: '#ececec',
    percentage: 0,
    showText: true,
    height: 12,
    customStyle: () => ({})
})

const $u = computed(() => {
    return uni.$u
})

let lineWidth: string | number = 0

const u_line_progress_background = ref(null)

const progressStyle = computed(() => {
    let style: any = {}
    style.width = lineWidth
    style.backgroundColor = Props.activeColor
    style.height = uni.$u.addUnit(Props.height)
    return style
})

const innserPercentage = computed(() => {
    // 控制范围在0-100之间
    if (Props.percentage < 0) {
        return 0
    } else if (Props.percentage <= 100) {
        return Number(Props.percentage)
    } else {
        return 100
    }
})

onMounted(() => {
    init()
})

const init = () => {
    uni.$u.sleep(20).then(() => {
        resizeProgressWidth()
    })
}

const resizeProgressWidth = () => {
    getProgressWidth().then((size: any) => {
        const { width } = size
        // 通过设置的percentage值，计算其所占总长度的百分比
        lineWidth = `${(width * innserPercentage.value) / 100}px`
    })
}

const getProgressWidth = () => {
    // #ifndef APP-NVUE
    return $uGetRect('.u-line-progress__background')
    // #endif

    // #ifdef APP-NVUE
    // 返回一个promise
    return new Promise(resolve => {
        dom.getComponentRect(u_line_progress_background.value, (res: any) => {
            resolve(res.size)
        })
    })
    // #endif
}

const $uGetRect = (selector: string, all?: boolean) => {
    return new Promise(resolve => {
        uni.createSelectorQuery()
            .in(this)
            [all ? 'selectAll' : 'select'](selector)
            .boundingClientRect(rect => {
                if (all && Array.isArray(rect) && rect.length) {
                    resolve(rect)
                }
                if (!all && rect) {
                    resolve(rect)
                }
            })
            .exec()
    })
}
</script>

<style scoped lang="scss">
@import '@/static/style/components.scss';

.u-line-progress {
    align-items: stretch;
    position: relative;
    @include flex(row);
    flex: 1;

    &__background {
        background-color: #ececec;
        border-radius: 100px;
        flex: 1;
    }

    &__line {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        align-items: center;
        @include flex(row);
        color: #ffffff;
        transition: width 0.5s ease;
        justify-content: flex-end;
    }

    &__text {
        font-size: 10px;
        align-items: center;
        text-align: right;
        color: #ffffff;
        margin-right: 5px;
        transform: scale(0.9);
    }
}
</style>
